<script setup lang="ts">
  import { HMessage, HMessageBox } from '@/components/common/message'
  import infoTip from '@/config/info-tip'
  import { useGetFaults, useFaultsDel } from '@/services/pages/know/fault'
  import { ElMessageBox, TableInstance } from 'element-plus'
  import { ref } from 'vue'
  import FaultAdd from './FaultCreateModal.vue'

  const { total, faults, getFaultsParam, getFaultsLoading, getFaults } = useGetFaults()
  const { deleteFaults } = useFaultsDel()

  defineOptions({
    name: 'TableKnowFault',
  })

  const emits = defineEmits<{
    (e: 'selection-change', value: Array<string>): void
  }>()

  const selecttion = ref<Array<string>>([])
  const tableInstance = ref<TableInstance | null>(null)
  const currentEditFaultId = ref('')
  const faultDialogVisible = ref(false)

  const handleChange = (selectedFaults: Array<KnowFaults>) => {
    selecttion.value = selectedFaults.map((fault) => fault.id)
    emits('selection-change', selecttion.value)
  }

  const handleDel = (fault: KnowFaults) => {
    if (tableInstance.value) {
      tableInstance.value.clearSelection()
      tableInstance.value.toggleRowSelection(fault, true)
      ElMessageBox({
        title: '提示',
        type: 'error',
        message: infoTip.know.fault.list.del,
        showCancelButton: true,
        async beforeClose(action, instance, done) {
          if (['close', 'cancel'].includes(action)) {
            done()
            return
          }

          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.cancelButtonLoading = true
            const res = await deleteFaults(selecttion.value)
            instance.confirmButtonLoading = false
            instance.cancelButtonLoading = false
            if (res.code === 20000) {
              HMessage.success(infoTip.know.fault.list.delSuccess)
              getFaults()
              done()
              return
            }

            HMessageBox.error(res.message)
          }
        },
      })
    }
  }

  const handleEdit = (faultId: string) => {
    currentEditFaultId.value = faultId
    faultDialogVisible.value = true
  }

  defineExpose({
    total,
    getList: (param: typeof getFaultsParam.value) => {
      getFaultsParam.value = param
      getFaults()
    },
  })
</script>

<template>
  <el-table
    ref="tableInstance"
    v-loading="getFaultsLoading"
    :border="true"
    stripe
    resizable
    :data="faults"
    height="100%"
    :tooltip-options="{
      popperClass: 'text-tooltip',
    }"
    @selection-change="handleChange"
  >
    <!-- 选择 -->
    <el-table-column type="selection" width="50" fixed="left" :align="'center'" />

    <!-- 序号 -->
    <el-table-column type="index" label="序号" width="55" :align="'center'" fixed="left" />

    <!-- 故障代码 -->
    <el-table-column show-overflow-tooltip prop="code" label="故障代码" width="100" />

    <!-- 故障分类 -->
    <el-table-column show-overflow-tooltip prop="name" label="故障分类" width="100" />

    <!-- 故障原因分析 -->
    <el-table-column show-overflow-tooltip prop="faultReason" label="故障原因分析" min-width="230">
      <template #default="{ row }">
        {{ (row.faultReason || []).join('、') }}
      </template>
    </el-table-column>

    <!-- 解决方案/维修措施 -->
    <el-table-column
      show-overflow-tooltip
      prop="solution"
      label="解决方案/维修措施"
      min-width="230"
    >
      <template #default="{ row }">
        {{ (row.solution || []).join('、') }}
      </template>
    </el-table-column>

    <!-- 所属组件 -->
    <el-table-column show-overflow-tooltip prop="oneFaultType" label="所属组件" width="100" />

    <!-- 移动端是否显示 -->
    <el-table-column show-overflow-tooltip label="移动端是否显示" width="120">
      <template #default="{ row }">
        {{ row.mobileShow ? '显示' : '隐藏' }}
      </template>
    </el-table-column>

    <!-- 可见类型 -->
    <el-table-column label="可见类型" show-overflow-tooltip width="80">
      <template #default="{ row }">
        <span v-if="row.visibilityType === 1">全部可见</span>
        <span v-if="row.visibilityType === 2">网点可见</span>
        <span v-if="row.visibilityType === 3">公司可见</span>
      </template>
    </el-table-column>

    <!-- 创建时间 -->
    <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="130" />

    <!-- 更新时间 -->
    <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="130" />

    <!-- 状态 -->
    <el-table-column prop="status" label="状态" width="80" fixed="right" :align="'center'">
      <template #default="scope">
        <div class="flex_justify_center">
          <HStatus v-if="!scope.row.status">启用</HStatus>
          <HStatus v-else type="info">禁用</HStatus>
        </div>
      </template>
    </el-table-column>

    <!-- 操作 -->
    <el-table-column fixed="right" label="操作" width="90">
      <template #default="scope">
        <h-space>
          <h-link v-permission="'know_faultUpdate'" @click="handleEdit(scope.row.id)">编辑</h-link>
          <h-link type="error" v-permission="'know_faultDelete'" @click="handleDel(scope.row)">删除</h-link>
        </h-space>
      </template>
    </el-table-column>

    <fault-add
      v-model:visible="faultDialogVisible"
      :fault-id="currentEditFaultId"
      @search="getFaults"
    ></fault-add>
  </el-table>
</template>

<style scoped lang="scss">
  :deep(.text-tooltip) {
    max-width: 300px;
    max-height: 150px;
    overflow: auto;
  }
</style>
